<script lang="ts" setup>
import { animateToNumber } from '@/utils/animate'

const themeToken = getThemeTokenHook()
// 用户总数
const userTotal = ref(0)
// 订单总数
const orderTotal = ref(0)
// 商品总数
const productTotal = ref(0)
//销售
const saleTotal = ref(0)

const userData = [861, 1002, 3195]

animateToNumber(userTotal, 13457)
animateToNumber(productTotal, 84232)
animateToNumber(saleTotal, 4356)
animateToNumber(orderTotal, 45245)
</script>

<template>
  <a-row :gutter="[15, 15]" class="statistic">
    <a-col :md="12" :xl="6" :xs="24">
      <a-card class="statistic-item">
        <div class="header">
          <div class="title">会员人数</div>
          <div
            :style="{
              color: themeToken.colorPrimary,
              background: themeToken.colorPrimaryBgHover,
              borderRadius: themeToken.borderRadiusSM + 'px'
            }"
            class="icon"
          >
            <Icon style="font-size: 16px" type="icon-user" />
          </div>
        </div>
        <a-statistic :value="userTotal" />
      </a-card>
    </a-col>
    <a-col :md="12" :xl="6" :xs="24">
      <a-card class="statistic-item">
        <div class="header">
          <div class="title">商品数量</div>
          <div
            :style="{
              color: themeToken.colorError,
              background: themeToken.colorErrorBgHover,
              borderRadius: themeToken.borderRadiusSM + 'px'
            }"
            class="icon"
          >
            <Icon style="font-size: 16px" type="icon-file" />
          </div>
        </div>
        <a-statistic :value="productTotal" /> </a-card
    ></a-col>
    <a-col :md="12" :xl="6" :xs="24">
      <a-card class="statistic-item">
        <div class="header">
          <div class="title">当天销售额</div>
          <div
            :style="{
              color: themeToken.colorSuccess,
              background: themeToken.colorSuccessBgHover,
              borderRadius: themeToken.borderRadiusSM + 'px'
            }"
            class="icon"
          >
            <Icon style="font-size: 16px" type="icon-appstore" />
          </div>
        </div>
        <a-statistic :value="saleTotal" /> </a-card
    ></a-col>
    <a-col :md="12" :xl="6" :xs="24">
      <a-card class="statistic-item">
        <div class="header">
          <div class="title">当天订单量</div>
          <div
            :style="{
              color: themeToken.colorWarning,
              background: themeToken.colorWarningBgHover,
              borderRadius: themeToken.borderRadiusSM + 'px'
            }"
            class="icon"
          >
            <Icon style="font-size: 16px" type="icon-appstore" />
          </div>
        </div>
        <a-statistic :value="orderTotal" />
      </a-card>
    </a-col>
  </a-row>
</template>

<style scoped>
.statistic {
  margin-bottom: 15px;
}
:deep(.ant-card-body) {
  padding: 15px;
}
.statistic-item {
  overflow: hidden;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 15px;
    }
    .icon {
      padding: 3px 5px;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
  }
}
</style>
